import React from "react";
import { useLocation } from "react-router-dom";
import { Box } from "@mui/material";

const VisitorCounter = ({ 
  display = true, 
  height = 125,
  useBackground = false,
  useBorder = false
}) => {
  const location = useLocation();

  // Don't render if display prop is false or on root path
  if (!display || location.pathname === "/") {
    return null;
  }

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "10px",
        width: "100%",
        ...(useBackground && { backgroundColor: "#f8f9fa" }),
        ...(useBorder && { borderTop: "1px solid #e9ecef" }),
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
          width: {
            xs: "100%",
            sm: 600,
            md: 960,
            lg: 1280,
            xl: 1920
          }
        }}
      >
        <object
          type="text/html"
          data={`data:text/html;charset=utf-8,
            <html>
              <head>
                <style>
                  body { 
                    margin: 0; 
                    display: flex; 
                    justify-content: center; 
                    align-items: center;
                    overflow: hidden;
                  }
                </style>
              </head>
              <body>
                <a href='http://www.freevisitorcounters.com'>free counters</a>
                <script type='text/javascript' src='https://www.freevisitorcounters.com/auth.php?id=4ed979fbe488c747a32322ddf82edd6d2e69d2ba'></script>
                <script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/1326635/t/0"></script>
              </body>
            </html>`}
          style={{
            border: "none",
            width: "100%",
            height: `${height}px`,
          }}
          aria-label="Visitor Counter"
        ></object>
      </Box>
    </Box>
  );
};

export default VisitorCounter;